@import '../../mixins'

.PinnedTab
  box(relative, flex)
  width: var(--tabs-pinned-width)
  height: var(--tabs-pinned-height)
  overflow: hidden
  justify-content: center
  align-items: center
  margin-right: -1px
  transform: translateZ(0)
  transition: opacity var(--d-fast), transform .12s
  background-color: #ffffff12
  background-image: linear-gradient(0deg, #00000016, #ffffff02)
  border-radius: 2px
  box-shadow: inset 0 1px 0 0 #ffffff12,
              inset 1px 0 0 0 var(--border-fg),
              inset -1px 0 0 0 var(--border-fg),
              0 -1px 0 0 var(--border-fg),
              inset 0 -1px 0 0 var(--border-fg),
              0 1px 8px 0 #00000024
  &:after
    content: ''
    box(absolute)
    size(3px, 3px)
    pos(3px, r: 3px)
    border-radius: 2px
    background-color: #ffffff
    box-shadow: 0 0 3px 0 #ffffff64
    opacity: 0

  &:hover
    background-color: var(--tabs-bg-hover)

  &:active
  &[data-active]:active
    background-color: var(--tabs-bg-active)

  &[data-active]
    background-image: linear-gradient(180deg, #00000032, #00000000)
    background-color: var(--tabs-activated-bg)
    box-shadow: inset 0 1px 0 0 #ffffff08,
                inset 1px 0 0 0 var(--border-active-fg),
                inset -1px 0 0 0 var(--border-active-fg),
                0 -1px 0 0 var(--border-active-fg),
                inset 0 -1px 0 0 var(--border-active-fg)
    &:after
      opacity: 1

  &[data-selected]
  &[data-selected]:active
    z-index: 10
    background-color: var(--tabs-selected-bg)

  &[data-discarded] > .fav
  &[data-discarded]:hover > .fav
  &[data-discarded] > .title
  &[data-discarded] > .ctx
    opacity: .56
  
  &[data-loading="true"]
    cursor: progress

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list]
  .PinnedTab
    size(100%)
    justify-content: flex-start
    height: var(--tabs-height)

// ---
// -- Drag layer
// -
.PinnedTab .drag-layer
  box(absolute)
  size(100%, same)
  pos(0, 0)
  z-index: 25

// ---
// -- Favicon
// -
.PinnedTab .fav
  box(relative)
  size(16px, same)
  margin: 0 6px
  flex-shrink: 0
  opacity: 1
  z-index: 20
  transition: opacity var(--d-fast), transform var(--d-fast)

.PinnedTab:hover .fav
  opacity: .7

.PinnedTab:active .fav
  transition: none
  opacity: .5

.PinnedTab[data-loading="true"]:not([data-audible]):not([data-muted]) .fav
  cursor: progress

// ---
// -- Favicon placeholer
// -
.PinnedTab .placeholder
  box(absolute)
  size(16px, same)
  pos(0, 0)
  filter: drop-shadow(1px 1px 0 #ffffff16)
  > svg
    box(absolute)
    size(100%, same)
    pos(0, 0)
    fill: var(--favicons-placeholder-bg)

.PinnedTab[data-updated] .placeholder
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 4px,
    #000000 5px,
    #000000
  )

.PinnedTab[data-loading] .placeholder
.PinnedTab[data-audible] .placeholder
.PinnedTab[data-muted] .placeholder
  mask: radial-gradient(
    circle at calc(100% - 1px) calc(100% - 1px),
    #00000024,
    #00000024 7px,
    #000000 8px,
    #000000
  )

.PinnedTab[data-loading][data-muted] .placeholder
.PinnedTab[data-loading][data-audible] .placeholder
  mask: linear-gradient(0deg, #00000024, #00000024 8px, #000000 9px, #000000)

// ---
// -- Favicon image
// -
.PinnedTab .fav > img
  box(absolute)
  size(100%, same)

.PinnedTab[data-updated] .fav > img
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 4px,
    #000000 5px,
    #000000
  )

.PinnedTab[data-loading] .fav > img
.PinnedTab[data-audible] .fav > img
.PinnedTab[data-muted] .fav > img
  mask: radial-gradient(
    circle at calc(100% - 1px) calc(100% - 1px),
    #00000024,
    #00000024 7px,
    #000000 8px,
    #000000
  )

.PinnedTab[data-loading][data-muted] .fav > img
.PinnedTab[data-loading][data-audible] .fav > img
  mask: linear-gradient(0deg, #00000024, #00000024 8px, #000000 9px, #000000)


// ---
// -- Loading / Progress animation
// -
.PinnedTab .progress-spinner
  box(absolute, border-box)
  size(12px, same)
  pos(b: -5px, r: -5px)
  border-radius: 50%
  border-top: 2px solid var(--progress-fg)
  border-left: 2px solid var(--progress-bg)
  border-right: 2px solid var(--progress-bg)
  border-bottom: 2px solid var(--progress-bg)
  animation: progress-animation .5s infinite linear

// ---
// -- Updated (highlight) badge
// -
.PinnedTab .update-badge
  box(absolute)
  size(6px, same)
  pos(b: -1px, r: -1px)
  border-radius: 50%
  background-color: var(--tabs-update-badge-bg)
  opacity: 0
  transform: scale(0.7, 0.7)
  transition: opacity var(--d-norm), transform var(--d-norm)

.PinnedTab[data-updated]:not([data-loading]):not([data-audible]):not([data-muted]) .update-badge
  opacity: 1
  transform: scale(1, 1)

// ---
// -- Ok / Error badges
// -
.PinnedTab .ok-badge
.PinnedTab .err-badge
  box(absolute)
  size(12px, same)
  pos(b: -5px, r: -5px)
  border-radius: 50%
  opacity: 0
  transform: scale(0.7, 0.7)
  transition: opacity var(--d-norm), transform var(--d-norm)
  > svg
    box(absolute)
    size(100%, same)

.PinnedTab .ok-badge > svg
  fill: var(--true-fg)

.PinnedTab .err-badge > svg
  fill: var(--false-fg)

.PinnedTab[data-loading="ok"] .ok-badge
.PinnedTab[data-loading="err"] .err-badge
  opacity: 1
  transform: scale(1, 1)

// ---
// -- Audio badge
// -
.PinnedTab .audio-badge
  box(absolute)
  size(10px, same)
  top: calc(50% + 2px)
  left: calc(50% + 2px)
  border-radius: 50%
  z-index: 30
  filter: drop-shadow(1px 1px 0 var(--text-edge-color))
  transition: transform var(--d-norm)
  > svg
    box(absolute)
    size(100%, same)
    fill: var(--badge-fg)
    opacity: 0
    transition: opacity var(--d-norm)

  &:hover
    opacity: .7

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list]
  .PinnedTab .audio-badge
    top: calc(50% + 2px)
    left: 16px

.PinnedTab[data-audible]:not([data-muted]) .audio-badge > svg.-loud
.PinnedTab[data-muted] .audio-badge > svg.-mute
  opacity: 1

.PinnedTab[data-loading] .audio-badge
  transform: scale(1, 1) translateX(-13px)

// ---
// -- Loaded animation
// -
.PinnedTab .complete-fx
  box(absolute)
  size(100%, same)
  pos(0, 0)
  background-image: linear-gradient(90deg, #00000000, var(--tabs-loading-fg))
  opacity: 0
  transform: translateX(-100%)

// ---
// -- Container badge
// -
.PinnedTab .ctx
  position: absolute
  z-index: 2000
  background-color: var(--container-fg)
  box-shadow: 0 0 1px 0 #00000032
#root[data-pinned-tabs-position="panel"] .PinnedTab .ctx
#root[data-pinned-tabs-position="top"] .PinnedTab .ctx
  bottom: 2px
  left: calc(50% - 5px)
  width: 10px
  height: 2px
  transition: width var(--d-fast)
#root[data-pinned-tabs-position="panel"] .PinnedTab[data-loading] .ctx
#root[data-pinned-tabs-position="top"] .PinnedTab[data-loading] .ctx
  width: 5px
#root[data-pinned-tabs-position="left"] .PinnedTab .ctx
#root[data-pinned-tabs-position="right"] .PinnedTab .ctx
  top: calc(50% - 8px)
  width: 2px
  height: 16px
#root[data-pinned-tabs-position="left"] .PinnedTab .ctx
  left: 1px
#root[data-pinned-tabs-position="right"] .PinnedTab .ctx
  right: 1px

// ---
// -- Drop slot
// -
.PinnedTab:before
  content: ''
  box(absolute)
  size(100%, same)
  opacity: 0
  transition: opacity var(--d-fast)

.PinnedTab[data-drop-slot]:before
  opacity: 1

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list]
  .PinnedTab:before
    pos(1px, 0)
    box-shadow: 0 -1px 0 0 var(--tabs-update-badge-bg)

#root[data-pinned-tabs-position="panel"]
#root[data-pinned-tabs-position="top"]
  .PinnedTab:before
    left: 1px
    box-shadow: -1px 0 0 0 var(--tabs-update-badge-bg)

#root[data-pinned-tabs-position="left"]
#root[data-pinned-tabs-position="right"]
  .PinnedTab:before
    top: 1px
    box-shadow: 0 -1px 0 0 var(--tabs-update-badge-bg)

// ---
// -- Title
// -
.PinnedTab .title
  box(relative)
  flex-grow: 1
  font: var(--tabs-font)
  color: var(--tabs-fg)
  padding: 0 1px
  transition: color .2s
  white-space: nowrap
  overflow: hidden
  transition: transform var(--d-fast), mask var(--d-fast)
  mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)

.PinnedTab[data-active] .title
  color: var(--tabs-activated-fg)

.PinnedTab:hover .title
.PinnedTab[data-active]:hover .title
  color: var(--tabs-fg-hover)

.PinnedTab[data-selected] .title
.PinnedTab[data-selected]:active .title
  color: var(--tabs-selected-fg)

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list]
  .PinnedTab[data-close-btn]:hover .title
    mask: linear-gradient(-90deg, transparent, transparent 25px, #000000 50px, #000000)

// ---
// -- Close button
// -
.PinnedTab .close
  box(absolute, none)
  pos(0, r: 0)
  size(30px)
  height: var(--tabs-height)
  cursor: pointer
  z-index: 30
  opacity: 0
  &:hover > svg
    fill: var(--tabs-close-hover-fg)
    stroke: var(--tabs-close-hover-fg)
  > svg
    box(absolute)
    pos(calc(50% - 7px), same)
    size(15px, same)
    fill: var(--tabs-close-fg)
    stroke: var(--tabs-close-fg)
    stroke-width: .5px
    transition: fill var(--d-fast)

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list]
  .PinnedTab[data-close-btn] .close
    box(block)

  .PinnedTab[data-close-btn]:hover .close
    opacity: 1
